<template>
  <a-cascader
    v-if="refresh"
    :fieldNames="{ label: 'name', value: 'name', children: 'children' }"
    :options="areaData"
    placeholder="请选择所处省市区"
    :defaultValue="defaultProvince"
    @change="onChange"
  />
</template>
<script>
import areaData from '../utils/province'
export default {
  name: 'CascaderProvince',
  props: {
    defaultProvince: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      areaData,
      refresh: true
    }
  },
  watch: { // 解决 数据更新, 视图不更新
    defaultProvince (newVal) {
        this.refresh = false
        this.$nextTick(() => {
          this.refresh = true
        })
    },
    deep: true
  },
  methods: {
    onChange (value) {
      this.$emit('myevent', value)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
